<template>
  <mi-header></mi-header>
  <div class="page-main home-main">
    <div class="container">
      <div class="home-banner-box">
        <a href="" target="_blank" onclick="">
          <img
            alt="test"
            width="1226"
            height="120"
            src="//cdn.cnbj1.fds.api.mi-img.com/mi-mall/f334fbd05d5681bb838fefd1c815d88c.jpg?thumb=1&amp;w=2452&amp;h=240&amp;f=webp&amp;q=90"
            lazy="loaded"
          />
        </a>
      </div>
      <div class="home-brick-box home-brick-row-2-box xm-plain-box">
        <div class="box-hd">
          <h2 class="title">手机</h2>
          <div class="more">
            <a href="" target="_blank" class="more-link"
              >查看更多
              <i class="el-icon-arrow-right"></i>
            </a>
          </div>
        </div>
        <div class="box-bd clearfix">
          <div class="row">
            <div class="span4">
              <ul class="brick-promo-list clearfix">
                <li class="brick-item brick-item-l">
                  <a href="">
                    <img
                      alt=""
                      src="//cdn.cnbj1.fds.api.mi-img.com/mi-mall/c583f2edc613f1be20fa415910b13ce3.jpg?thumb=1&amp;w=468&amp;h=1228&amp;f=webp&amp;q=90"
                      lazy="loaded"
                    />
                  </a>
                </li>
              </ul>
            </div>
            <div class="span16">
              <ul class="brick-list clearfix">
                <li
                  v-for="item in phonelist"
                  :key="item.id"
                  @click="
                    $router.push({
                      name: 'product',
                      params: {
                        productId: item.id,
                      },
                    })
                  "
                  class="brick-item brick-item-m brick-item-m-2"
                >
                  <div class="figure figure-img">
                    <img
                      width="160"
                      height="160"
                      alt="Xiaomi MIX 4"
                      :src="item.pic_urls"
                      lazy="loaded"
                    />
                  </div>
                  <h3 class="title">
                    {{ item.name }}
                  </h3>
                  <p class="desc">{{ item.description }}</p>
                  <p class="price">
                    <span class="num">{{ item.price }}</span
                    >元<span>起</span>
                    <!---->
                  </p>
                </li>
              </ul>
            </div>
          </div>
        </div>
        <!--分页-->
        <div class="page-bar clearfix">
          <ul>
            <li v-if="cur > 1">
              <a v-on:click="cur--, pageClick()">上一页</a>
            </li>
            <li v-if="cur == 1"><a class="banclick">上一页</a></li>
            <li
              :key="index"
              v-for="index in indexs"
              v-bind:class="{ active: cur == index }"
            >
              <a v-on:click="btnClick(index)">{{ index }}</a>
            </li>
            <li v-if="cur != all">
              <a v-on:click="cur++, pageClick()">下一页</a>
            </li>
            <li v-if="cur == all"><a class="banclick">下一页</a></li>
            <li>
              <a
                >共<i>{{ all }}</i
                >页</a
              >
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
  <mi-footer></mi-footer>
</template>

<script>
import MiFooter from '@/components/MiFooter.vue'
import MiHeader from '@/components/MiHeader.vue'
// import request from '@/utils/request.js'
import axios from 'axios'
export default {
  name: 'Home',
  components: {
    MiFooter,
    MiHeader
  },
  data () {
    return {
      all: 10, // 总页数
      cur: 1, // 当前页码
      totalPage: 0, // 当前条数
      phonelist: [
        // {
        //   id: '10001',
        //   name: 'Xiaomi MIX 4',
        //   pic_urls: '//cdn.cnbj1.fds.api.mi-img.com/mi-mall/ab07e0fcbec3beb8b0f409db8bee8da4.jpg?thumb=1&amp;w=400&amp;h=400&amp;f=webp&amp;q=90',
        //   price: '4999',
        //   description: 'CUP全面屏'
        // }
      ]
    }
  },
  created () {
    this.onLoad()
  },
  methods: {
    async onLoad () {
      // 下面的调用会产生跨域异常，待解决。
      // this.phonelist = await request({
      //   method: 'GET',
      //   url: '/product'
      // })
      // this.phonelist = await axios.get('http://localhost:3000/product').then(res => res.data)

      await axios.get(`http://localhost:8081/product/getProducts?pageNo=${this.cur}&pageSize=8`).then((res) => { this.phonelist = res.data.goodsInfos; this.all = res.data.allPage; this.totalPage = res.data.pageSize; this.cur = res.data.curPageNo })
      console.log(this.phonelist)
    },
    // 这是一个定时器
    timer () {
      return setTimeout(() => {
        this.getData()
      }, 5000)
    },
    watch: {
      list () {
        this.timer()
      }
    },
    destroyed () {
      clearTimeout(this.timer)
    },
    // 请求数据
    dataListFn: function (index) {
      axios.get('http://localhost:8081/product/getProducts',
        {
          params: {
            pageNo: index,
            pageSize: '8'
          }
        }).then((res) => {
        if (res.data.message === 'success') {
          this.dataList = []
          for (let i = 0; i < res.data.data.length; i++) {
            this.dataList.push(res.data.data[i])
          }
          this.all = res.data.allPage// 总页数
          this.cur = res.data.curPageNo
          this.totalPage = res.data.pageSize
          this.phonelist = res.data.goodsInfos
        }
      })
    },
    // 分页
    btnClick: function (data) { // 页码点击事件
      if (data !== this.cur) {
        this.cur = data
      }
      // 根据点击页数请求数据
      // this.dataListFn(this.cur.toString())
      this.onLoad()
    },
    pageClick: function () {
      // 根据点击页数请求数据
      // this.dataListFn(this.cur.toString())
      this.onLoad()
    }
  },
  computed: {
    // 分页
    indexs: function () {
      var left = 1
      var right = this.all
      var ar = []
      if (this.all >= 5) {
        if (this.cur > 3 && this.cur < this.all - 2) {
          left = this.cur - 2
          right = this.cur + 2
        } else {
          if (this.cur <= 3) {
            left = 1
            right = 5
          } else {
            right = this.all
            left = this.all - 4
          }
        }
      }
      while (left <= right) {
        ar.push(left)
        left++
      }
      return ar
    }
  }
}
</script>

<style>
.span1,
.span2,
.span3,
.span4,
.span5,
.span6,
.span7,
.span8,
.span9,
.span10,
.span11,
.span12,
.span13,
.span14,
.span15,
.span16,
.span17,
.span18,
.span19,
.span20 {
  float: left;
  margin-left: 14px;
  min-height: 1px;
}
.page-main {
  background: #f5f5f5;
}
.home-brick-box {
  margin-bottom: 8px;
}
.xm-plain-box .box-hd {
  position: relative;
  height: 58px;
}
.xm-plain-box .box-hd .title {
  margin: 0;
  font-size: 22px;
  font-weight: 200;
  line-height: 58px;
  color: #333;
}
.xm-plain-box .box-hd .more {
  position: absolute;
  top: 0;
  right: 0;
}
.xm-plain-box .box-hd .more .more-link {
  font-size: 16px;
  line-height: 58px;
  color: #424242;
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
}
.xm-plain-box .box-hd .more .more-link:hover {
  color: #ff6700;
}
.row {
  margin-left: -14px;
}
.span4 {
  width: 234px;
}
.brick-promo-list {
  height: 614px;
  margin: 0 0 -14px -14px;
  padding: 0;
  list-style-type: none;
}
.brick-item-l {
  height: 614px;
}
.brick-item {
  position: relative;
  z-index: 1;
  float: left;
  width: 234px;
  margin-left: 14px;
  margin-bottom: 14px;
  background: #fff;
  -webkit-transition: all 0.2s linear;
  transition: all 0.2s linear;
}
.brick-promo-list a {
  display: block;
  width: 100%;
  height: 100%;
}
.brick-promo-list .brick-item-l img {
  height: 614px;
  width: 234px;
}
.span16 {
  width: 978px;
}
.home-brick-box .brick-list {
  margin: 0 0 -14px -14px;
}
.brick-list {
  width: 992px;
}
.brick-list {
  height: 614px;
  margin: 0;
  padding: 0;
  list-style-type: none;
}
.brick-item {
  position: relative;
  z-index: 1;
  float: left;
  width: 234px;
  margin-left: 14px;
  margin-bottom: 14px;
  background: #fff;
  -webkit-transition: all 0.2s linear;
  transition: all 0.2s linear;
}
.brick-item-m-2 {
  height: 300px;
  padding: 0;
}
.brick-item-m-2 > a {
  display: block;
  height: 100%;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  padding: 20px 0;
}
.brick-item-m-2 .figure-img,
.brick-item-m-2 .figure-img img {
  width: 160px;
  height: 160px;
}
.brick-item-m .figure-img {
  width: 150px;
  height: 150px;
  margin: 0 auto 18px;
}
.brick-item-m .desc,
.brick-item-m .title {
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  font-size: 14px;
  font-weight: 400;
  color: #333;
}
.brick-item-m .desc {
  margin: 0 10px 10px;
  height: 18px;
  font-size: 12px;
  color: #b0b0b0;
}
.brick-item-m .desc,
.brick-item-m .title {
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.brick-item-m-2 .price {
  margin: 0 10px 14px;
}
.brick-item-m .price {
  margin: 0 10px 10px;
  text-align: center;
  color: #ff6700;
}
.brick-item:hover {
  z-index: 2;
  box-shadow: 0 15px 30px rgb(0 0 0 / 10%);
  transform: translate3d(0, -2px, 0);
}
.clearfix:after,
.clearfix:before {
  content: " ";
  display: block;
  clear: both;
  height: 0;
}

/*分页*/
.page-bar {
  height: 40px;
  width: 100%;
  margin: 20px auto;
}
.page-bar ul {
  margin: 0 auto;
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
}
li {
  /* height: 34px; */
  margin: 0px;
  padding: 0px;
}
li {
  list-style: none;
}
.page-bar li:first-child > a {
  margin-left: 0px;
}
.page-bar a {
  border: 1px solid #ddd;
  text-decoration: none;
  position: relative;
  float: left;
  padding: 6px 12px;
  margin-left: -1px;
  line-height: 1.42857143;
  color: #5d6062;
  cursor: pointer;
  margin-right: 20px;
}
.page-bar a:hover {
  background-color: #eee;
}
.page-bar a.banclick {
  cursor: not-allowed;
}
.page-bar .active a {
  color: #fff;
  cursor: default;
  background-color: #e96463;
  border-color: #e96463;
}
.page-bar i {
  font-style: normal;
  color: #d44950;
  margin: 0px 4px;
  font-size: 12px;
}
</style>
